<template>
  <div>
    <h1>管理员列表</h1>
    <el-table :data="admins" :row-class-name="stopUse">
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="power" label="权限">
        <template slot-scope="scope">
          {{scope.row.power==1 ? '超级管理员':'普通管理员'}}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
        {{scope.row.state==1 ? '正常':'禁用'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <span v-if="scope.row.power==1">不可操作</span>
        <el-button
          size="mini"
          @click="$router.push(`/admins/adminupdate/${scope.row._id}`)" :disabled="scope.row.state==2" type="success" v-if="scope.row.power==2">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="adminStop(scope.row,scope.$index)" v-if="scope.row.power==2">{{scope.row.state==1 ? '禁用':'启用'}}</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      admins: []
    };
  },
  created() {
    this.findAdmin();
  },
  methods: {
    async findAdmin() {
      const res = await this.$http.get("/admins/getAdmins");
      this.admins = res.data;
    },
    async adminStop(row,index){
      if(row.state==1){
        this.admins[index].state=2;
      }else{
        this.admins[index].state=1;
      }
      // console.log(row);
      // console.log(this.admins[index]);
      const res=await this.$http.put(`/admins/addAdmins/${row._id}`,row);
      this.$message({   
        type:'success',
        message:res.data.state==1 ? '禁用成功':'启用成功'
      });
    },
    stopUse({row}){
      console.log(row.state);
      if(row.state==2){
        return 'stop-row';
      }
      return "";
    }
  }
};
</script>

<style lang="scss">
.editBtn{
  background-color:skyblue;
  color:white;
}
.el-table .stop-row{
  background-color:#eee;
}
</style>